<template>
  <div class="login">
    <video autoplay loop muted playsInline :src="vSrc" class="myvideo"></video>
    <div class="login-box">
      <h2 class="title">找回密码(学员)</h2>
      <div class="box">
        <el-form
          label-position="left"
          class="myform"
          status-icon
          :model="form"
          ref="uform"
          size="default"
          :rules="rules"
        >
          <el-form-item label="手机号" prop="phone">
            <el-input
              :prefix-icon="Phone"
              v-model="form.phone"
              type="text"
              placeholder="请输入手机号"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="验证码" prop="captcha">
            <el-row>
              <el-col :span="13">
                <el-input
                  :prefix-icon="Message"
                  v-model="form.captcha"
                  type="text"
                  placeholder="请输入手机号"
                  autocomplete="off"
                />
              </el-col>
              <el-col :span="10" :offset="1">
                <el-button
                  type="warning"
                  :disabled="disabled"
                  v-if="flag"
                  @click="sendCaptcha"
                  >发送验证码</el-button
                >
                <el-button type="info" disabled v-else
                  >倒计时 {{ time }} S
                </el-button>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="新密码" prop="password">
            <el-input
              :prefix-icon="Lock"
              show-password
              v-model="form.password"
              type="password"
              placeholder="请输入新密码"
              autocomplete="off"
            />
          </el-form-item>

          <el-form-item class="lastitem">
            <div class="alinks">
              <router-link to="/register" class="litem color"
                >去注册</router-link
              >
              <router-link :to="{ name: 'login' }" class="litem bg"
                >去登录</router-link
              >
            </div>
          </el-form-item>

          <el-form-item class="lastitem">
            <el-button type="success" @click="submitForm" class="btnblock"
              >找回密码</el-button
            >
             <el-button type="danger" @click="resetForm" class="btnblock">重置</el-button>
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>


<script setup>
import { reactive, ref, computed } from "vue";
import { Avatar, Lock, Phone, Message } from "@element-plus/icons-vue"; //icon图标
import { reg } from "@/utils/validate";
import { Http } from "@/api";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const router = useRouter();
const time = ref(120); //定义初始时间
const flag = ref(true); //验证码初始按钮状态
const uform = ref();
const form = ref({});

const disabled = computed(() => !reg.phone.test(form.value.phone));

// 验证码时间
let timer = null;
const timeDownFunc = () => {
  flag.value = false;
  time.value--;
  timer = setInterval(() => {
    //  初始定义的时间 大于0 --
    if (time.value > 0) {
      flag.value = false;
      time.value--;
    } else {
      clearInterval(timer);
      timer = null; //时间置空
      flag.value = true;
      time.value = 120; //重新开始
    }
  }, 1000);
}

// 验证码
const sendCaptcha = async () => {
  let res = await Http.sentcaptcha({phone:form.value.phone });
  timeDownFunc();
};





// 重置按钮
const resetForm = () => {
  uform.value.resetFields();
};



const submitForm = ()=>{
    uform.value.validate(async valid=>{
        if(valid){
            let res = await Http.findpass(form.value)
            if(res.code==200){
                router.push("/login")
                localStorage.removeItem("password")
            }
        }else{
            ElMessage.error("请输入有效的数据信息")
        }
    })
}


const rules = reactive({
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    { pattern: reg.phone, message: "请输入有效的手机号", trigger: "blur" },
  ],
  captcha: [
    { required: true, message: "请输入验证码", trigger: "blur" },
    { pattern: reg.code, message: "请输入4位数字验证码", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    {
      pattern: reg.pwd,
      message: "请输入6-16位数字加字母组合的密码",
      trigger: "blur",
    },
  ],
});
</script>